<template>
    <div class="contertwo">
        <button @click="back" class="btn1">点击返回</button>
        <div class="conterthree">
            <div class="left">
                <div class="imgOne">
                    <img :src="Src" alt="">
                </div>
                <div class="left-a">
                    <span>自动挡</span>
                    <span>小轿车</span>
                    <span>4门5座</span>
                    <span>1.4L</span>
                </div>
                <div class="nei-o">
                    <p class="p1">空间较大，乘坐舒适</p>
                    <p class="p1">建议乘坐5人，+3行李箱</p>
                    <div>
                        <p class="p2">
                            <span class="qu">取</span> <span class="span1">2019-01-05 &nbsp; 周六 10:00 </span>
                            <br>
                            德国 法兰克福-法兰克福国际机场 <br>
                            取车门店：航站楼2 <br>
                            营业时间：06:00-23:00
                        </p>
                        <p class="p2">
                            <span class="huan">还</span> <span class="span1">2019-01-05 &nbsp; 周六 10:00 </span>
                            <br>
                            德国 法兰克福-法兰克福国际机场 <br>
                            取车门店：航站楼2 <br>
                            营业时间：06:00-23:00
                        </p>
                        <p class="p2">
                            <span class="span1">驾照支持</span> <br>
                            该门店支持中国大陆驾照提车，只需要提前对中国大陆驾照进行翻译认证即可
                        </p>
                    </div>
                </div>
            </div>
            <div class="right">
                <div>
                    <p class="rigth-p">{{ name }}</p>
                    <p class="rigth-p1">现在预订只需支付模块定金！</p>
                </div>
                <div class="right-o">
                    <span>总价：￥<span class="right-price">{{ Price }}</span> </span><span>(3天租期，日均￥316)</span>
                    <p>在线支付全额通常可享受最优惠价格，提交订单支付￥1216</p>
                    <div class="rigth-t">
                        <span>保价套餐</span>
                        <div class="taocan">
                            <div v-for="p in taoList" :key="p.id" class="taocan1">
                                <span class="left-rifht">{{ p.name }}</span><span>{{ p.xian }}</span>
                                <p class="left-foot">{{ p.nei }}</p>
                            </div>
                        </div>

                    </div>
                </div>
                <div>
                    <p><span>额外驾驶人</span><span class="right-foot">不含额外驾驶人</span></p>
                    <p><span>燃油说明</span><span class="right-foot">满油取换</span></p>
                    <p><span>里程限制</span><span class="right-foot">无里程限制</span></p>
                    <p><span>支付方式</span><span class="right-foot">预付全额</span><span class="right-foot1">预付定金</span></p>
                    <p><span>服务方式</span><span class="right-foot">免费修改</span><span class="right-foot1">免费取消</span><span
                            class="right-foot1">立即确认</span></p>
                </div>
                <button class="btn">立即预订</button>
            </div>
        </div>
    </div>
</template>

<script>
import { nanoid } from 'nanoid';
export default {
    name: 'XiangQin',
    props: ["name", "price", "id"],
    mounted() {
        console.log(this.$route.query);
    },
    data() {
        return { 
            Src: this.$route.query.src,
            taoList: [
                {
                    id: nanoid(), name: '标准套餐', xian: '碰撞盗抢险(起赔额：1千)', nei: '不含玻璃轮胎底盘，不含三者险'
                },
                {
                    id: nanoid(), name: '三者险套餐', xian: '碰撞盗抢险(起赔额：1千)+三者险', nei: '承保事故第三方人身财产损失，降低高额赔付风险'
                },
                {
                    id: nanoid(), name: '全额险套餐', xian: '碰撞盗抢险(起赔额：1千)+三者险+人身险', nei: '已含三者险，另外全车人员人身财产保障'
                },
                {
                    id: nanoid(), name: '超安心套餐', xian: '碰撞盗抢险(起赔额：1千)+三者险+补充全险', nei: '已保玻璃轮胎底盘，24小时道路救援，境外安选'
                },
            ]
        }
    },
    computed: {
        Price() {
            return this.$route.query.price.slice(0, 3) * 3
        }
    },
    methods: {
        back() {
            this.$router.back()
        }
    }
}
</script>

<style scoped>
.btn1 {
    position: relative;
    left: 22px;
    bottom: 3px;
}

.taocan1:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    outline: 4px solid orange;
}

.left-rifht {
    margin-right: 40px;
}

.left-foot {
    margin-left: 90px;
}

.taocan1 {
    transition: all .5s;
    width: 100%;
    height: 70px;
    margin-top: 20px;
    color: rgb(48, 46, 46);
    cursor: pointer;
    outline: 1px solid rgb(72, 71, 71);
}

.taocan {
    width: 450px;
    height: 400px;
    margin-left: 50px;
}

.qu {
    background: rgb(4, 160, 4);
    margin-left: -30px;
}

.huan {
    background: rgb(255, 21, 21);
    margin-left: -30px;

}

.btn {
    width: 160px;
    height: 30px;
    background: rgb(6, 47, 230);
    text-align: center;
    line-height: 30px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 200px;
}

.right-foot1 {
    margin-left: 40px;
}

.right-foot {
    width: 120px;
    height: 30px;
    outline: 3px solid rgb(247, 227, 47);
    text-align: center;
    line-height: 30px;
    margin-left: 40px;

}

.right-price {
    font-size: 30px;
    color: rgb(232, 38, 12);
}

.rigth-p1 {
    font-size: 15px;
    color: rgb(251, 86, 53);
}

.rigth-p {
    font-size: 25px;
    font-weight: bolder;
}

.span1 {
    margin-bottom: 5px;
    font-size: 24px;
}

.p2 {
    color: rgb(87, 86, 86);
    font-size: 20px;
    margin-left: 40px;
}

.p1 {
    color: rgb(167, 168, 168);
    font-size: 15px;
}

.left-a {
    width: 90%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    color: rgb(171, 168, 168);
    font-size: 15px;
}

.rigth-t {
    width: 100%;
    height: 400px;
}

.right-o {
    background: rgb(252, 250, 250);
    width: 100%;
    height: 500px;
}

.right {
    width: 500px;
    height: 100%;
}

.nei-o {
    width: 100%;
    height: 500px;
}

.imgOne {
    width: 400px;
    height: 250px;
}

.imgOne img {
    width: 100%;
    height: 100%;
}

.contertwo {
    width: 80%;
    margin: auto;
    height: 900px;
}

.conterthree {
    width: 95%;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.left {
    width: 400px;
    height: 100%;
}
</style>